<template>
	<view class="page">
		<uv-cell-group v-if="token">
			<uv-cell :border="false">
				<template v-slot:label>
					<text style="font-size: 28rpx;color: #fff;">登录账号</text>
				</template>
				<template v-slot:value>
					<text style="font-size: 24rpx;color: #999;">{{ user.cellphone }}</text>
				</template>
			</uv-cell>
			<uv-cell :border="false">
				<template v-slot:label>
					<view style="display: flex; align-items: center;">
						<text style="font-size: 28rpx;color: #fff;margin-right: 36rpx;">用户昵称</text>
						<input v-if="isUserNameEdit" type="text" name="userName" id="userName" v-model="userName"
							style="flex:1;font-size: 24rpx;color: #ccc;border-bottom: 2rpx solid #ccc;height: 40rpx;padding:4rpx 10rpx;margin-right: 40rpx;border-radius: 4rpx;" />
						<text v-else style="font-size: 24rpx;color: #999;">{{ user.name }}</text>
					</view>
				</template>
				<template v-slot:value>
					<view v-if="isUserNameEdit"
						style="color: #999;font-size: 24rpx;width: 120rpx;height:56rpx;border: 2rpx solid #999999;border-radius: 30rpx;display: flex;align-items: center;justify-content: center;"
						@click="submitUserName">
						保存</view>
					<view v-else
						style="color: #999;font-size: 24rpx;width: 120rpx;height:56rpx;border: 2rpx solid #999999;border-radius: 30rpx;display: flex;align-items: center;justify-content: center;"
						@click="changeUserName(true)">
						修改</view>
				</template>
			</uv-cell>
			<uv-cell isLink :border="false" :clickable="false" @click="bindWeichat">
				<template v-slot:label>
					<text style="font-size: 28rpx;color: #fff;">绑定微信号</text>
				</template>
				<template v-slot:value>
					<text style="font-size: 24rpx;color: #999;">{{ user.nickname }}</text>
				</template>
			</uv-cell>
			<uv-cell isLink :border="false" :clickable="false" url="/pages/question/question">
				<template v-slot:label>
					<text style="font-size: 28rpx;color: #fff;">常见问题</text>
				</template>
			</uv-cell>
			
			<uv-cell isLink v-if="distributeFlag"  :border="false" :clickable="false" @click="agentBackend">
				<template v-slot:label>
					<text style="font-size: 28rpx;color: #fff;">代理后台</text>
				</template>
			</uv-cell>

			<view class="kf" v-if="kfImg">
				<text class="title">长按添加客服咨询</text>
				<image class="kf-img" :src="kfImg" show-menu-by-longpress="true"></image>
			</view>
		</uv-cell-group>

		<uv-cell-group v-else>
			<uv-cell isLink :border="false" :clickable="false" url="/pages/question/question">
				<template v-slot:label>
					<text style="font-size: 28rpx;color: #fff;">常见问题</text>
				</template>
			</uv-cell>
		</uv-cell-group>



		<view class="loginOut" @click="loginOut">退出登录</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	//pinia
	import {
		storeToRefs
	} from 'pinia'
	import {
		useUserStore
	} from "@/stores/useUserStore.js"

	// 获取pinia的数据
	const userStore = useUserStore()

	// 从pinia的数据中结构出值并做响应式
	const {
		user,
		token,
		authorities,
	} = storeToRefs(userStore)

	import {
		apiSystemSetting
	} from '@/api/systemApi.js'
	import {
		apiChangeUserName, apiCheckToken
	} from '@/api/authApi.js'

	const kfImg = ref('')
	
	const distributeFlag = ref(false)
	
	
	const setDistributeFlag = ()=>{
		distributeFlag.value = authorities.value.includes('senior')||authorities.value.includes('primary')
		console.log("====distributeFlag======", distributeFlag.value)
		console.log("====authorities======")
		console.log(authorities.value)
	}
	
	const apiDistributeAuth = async () => {
		const res = await apiCheckToken(token.value)
		const auths = res.authorities
		if(!auths ||auths.length ==0){
			auths = [(new Date()).valueOf().toString()]
		}
		userStore.setAuths(auths)
		setDistributeFlag()
	}
	
	const checkDistributeAuth =  () => {
		if(!authorities.value || authorities.value.length ==0 ){
			apiDistributeAuth()
		}else{
			setDistributeFlag()
		}

	}

	const getSystemSetting = async () => {
		const res = await apiSystemSetting('service_wechat_business')
		kfImg.value = res.data.content
	}

	const loginOut = () => {

		uni.showToast({
			title: '退出成功',
			icon: "none"
		})
		userStore.setToken('')
		userStore.setUser([])
		userStore.setAuths([])
		setTimeout(() => {
			uni.switchTab({
				url: "/pages/index/index"
			})
		}, 1500);
	}
	
	// 代理后台
	const agentBackend = () => {
		const href = "http://distribution.ai.ytaiccg.com/#/dashboard";
		// #ifdef H5
		window.open(href)
		// #endif
		// #ifdef MP
		uni.setClipboardData({
		  data: href,
		  success: () =>
			uni.showToast({
			  title: '链接已复制'
			})
		})
		// #endif
		// #ifdef APP-PLUS
		plus.runtime.openWeb(href)
		// #endif
	}

	// 绑定微信
	const bindWeichat = () => {
		uni.showToast({
			title: "绑定请到官网进行",
			icon: "none"
		})
	}

	//修改昵称
	const isUserNameEdit = ref(false)
	const userName = ref('')
	const changeUserName = (Boolean) => {
		isUserNameEdit.value = Boolean
		userName.value = user.value.name
	}
	const submitUserName = async () => {
		const res = await apiChangeUserName({
			name: userName.value
		})
		changeUserName(false)
		uni.showToast({
			title: "昵称修改成功",
			icon: 'success',
		})
		setTimeout(function() {
			uni.reLaunch({
				url: '/pages/user/user'
			});
		}, 2000)
	}

	getSystemSetting()
	checkDistributeAuth()
</script>

<style lang="scss">
	.page {
		&:deep() {
			.uv-line {
				display: none;
			}

			.uv-cell-group {
				.uv-cell {
					background: #191919;
					border: none;
					border-radius: 20rpx;
					margin-bottom: 20rpx;

					&.uv-cell--clickable {
						background: #191919;
					}
				}
			}
		}

		.kf {
			// margin-top: 64rpx;
			width: 100%;
			display: flex;
			flex-direction: column;

			.title {
				font-size: 24rpx;
				height: 24rpx;
				line-height: 24rpx;
				text-align: center;
				color: #fff;
				font-weight: 500;
				margin-bottom: 24rpx;
			}

			.kf-img {
				width: 240rpx;
				height: 240rpx;
				background: #e6e6e6;
				border-radius: 5rpx;
				margin: 0 auto;
			}
		}

		.loginOut {
			width: 686rpx;
			height: 80rpx;
			background: #191919;
			border-radius: 15rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #999;
			position: fixed;
			bottom: 20rpx;
			left: 0;
			right: 0;
			margin: auto;
		}
	}
</style>